<!--
 * @Author: libing 9852442+liu-sheng-8667@user.noreply.gitee.com
 * @Date: 2024-04-12 22:40:33
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-07-18 15:08:23
 * @FilePath: \crm\pages\customer\order-info.vue
 * @Description: 订单详情
-->
<template>
  <view class="order-info">
    <view class="order-info-bg">
      <!-- 订单号 -->
      <view class="info-wrap">
        <view class="info-header">
          <view class="info-header-title">{{ "订单号：" + info.id }}</view>
          <view
            class="info-header-value"
            style="
              background: #015ad4;
              padding: 0 10px;
              border-radius: 10px;
              color: #fff;
              line-height: 20px;
              font-size: 15px;
            "
            v-if="!orderInfo.guarantee && currentIndex && hasPower"
            @click="goToGuarantee"
            >去担保</view
          >
          <view
            v-if="current == 2 || current == 1"
            @click="show22"
            style="
              background: #015ad4;
              padding: 0 10px;
              border-radius: 10px;
              color: #fff;
              line-height: 20px;
              font-size: 15px;
            "
          >
            去支付
          </view>
        </view>
        <view class="info-content">
          <view
            v-for="(item, index) in orderInfo.child"
            :key="index"
            class="info-content-item"
          >
            <view class="info-content-label">{{ item.label }}</view>
            <view class="info-content-value">{{
              item.prop === "status" ? orderStatus : info[item.prop]
            }}</view>
          </view>
        </view>
        <div
          class="info-content-value"
          v-if="info.customPhone"
          style="margin-top: 10px"
        >
          联系电话：{{ info.customPhone }}
        </div>
        <div
          class="info-content-value"
          v-if="info.customContactsAdress"
          style="margin-top: 10px"
        >
          地址：{{ info.customContactsAdress }}
        </div>
        <div
          class="info-content-value"
          v-if="info.customRemarks"
          style="margin-top: 10px"
        >
          备注：{{ info.customRemarks }}
        </div>
        <div
          class="info-content-value"
          v-if="info.createTimeStr"
          style="margin-top: 10px"
        >
          下单时间：{{ info.createTimeStr }}
        </div>
        <div style="margin-top: 10px" v-if="info.orderUrl">
          <img :src="info.orderUrl" alt="" />
        </div>
      </view>
      <!-- 收款信息 -->
      <view class="info-wrap" v-if="from !== 'photo'">
        <view class="info-header">
          <view class="info-header-title">{{ collectionInfo.title }}</view>
          <view class="info-header-value">{{ collectionInfo.value }}</view>
        </view>
        <view class="info-content">
          <view
            v-for="(item, index) in collectionInfo.child"
            :key="index"
            class="info-content-item"
          >
            <view class="info-content-label">{{ item.label }}</view>
            <view class="info-content-value">{{ item.value }}</view>
          </view>
        </view>
      </view>
      <u-tabs :list="navList" v-if="from !== 'photo'"></u-tabs>
    </view>
    <!-- 头部 -->
    <u-navbar title="订单详情" :autoBack="true" bgColor="transparent" />
    <!-- 基础信息 -->
    <view class="basic-info" v-if="from !== 'photo'">
      <view
        v-for="(item, index) in basicInfo"
        :key="index"
        class="basic-info-item"
      >
        <view class="basic-info-label">{{ item.label }}</view>
        <view class="basic-info-value">{{ info[item.value] || "" }}</view>
      </view>
      <div class="basic-info-item" v-if="dds.driverName">
        <view class="basic-info-label">司机：</view>
        <view class="basic-info-value" @click="go" style="color: #015ad4"
          >{{ dds.driverName }}，{{ dds.plateNumber }}，{{
            dds.phoneNumber
          }}</view
        >
      </div>
      <div v-else class="basic-info-item">
        <view class="basic-info-label">司机：</view>
        <view class="basic-info-value">暂无</view>
      </div>
    </view>
    <u-tabs :list="goodsList" v-if="from !== 'photo'"></u-tabs>
    <uni-table stripe emptyText="暂无更多数据" v-if="from !== 'photo'">
      <uni-tr>
        <uni-th align="left" width="100">商品id</uni-th>
        <uni-th align="left" width="100">商品名称</uni-th>
        <uni-th align="left" width="100">库存</uni-th>
        <uni-th align="left" width="100">分类</uni-th>
        <uni-th align="left" width="100">数量</uni-th>
        <uni-th align="left" width="100">单价</uni-th>
        <uni-th align="left" width="100">总价</uni-th>
      </uni-tr>
      <uni-tr v-for="(item, index) in info.items" :key="index">
        <uni-td>{{ item.productSkuId }}</uni-td>
        <uni-td>
          <view class="name">{{ item.productName }}</view>
        </uni-td>
        <uni-td>{{ item.skuStockCount }}</uni-td>
        <uni-td align="center">{{ item.categoryNames }}</uni-td>
        <uni-td>{{ item.productQuantity }}</uni-td>
        <uni-td>{{ item.price }}</uni-td>
        <uni-td>{{ item.priceToatal }}</uni-td>
      </uni-tr>
    </uni-table>
    <u-modal
      :show="show1"
      title="担保"
      showCancelButton
      @confirm="confirm"
      @cancel="cancel"
    >
      <u--input
        type="text"
        v-model="remark"
        border="surround"
        placeholder="请输入"
      />
    </u-modal>
    <u-modal :show="show2" title="去支付" @confirm="cancel">
      <div style="display: flex; justify-content: center">
        <canvas
          class="canvas-code"
          id="qrcode"
          canvas-id="qrcode"
          style="width: 200px; height: 200px"
        ></canvas></div
    ></u-modal>
  </view>
</template>
<script>
import {
  getOrderListid,
  getPhotoOrderInfo,
  reqGuarantee,
  getOrderListid1,
} from "@/apis/order/index";
import { STATUS_STATUS_MAP, PAY_STATUS_MAP } from "@/contacts/order";
import { BigNumber } from "bignumber.js";
import UQRCode from "uqrcodejs";
import { getUserInfo } from "@/apis/user";

export default {
  name: "order-info",
  onLoad(data) {
    this.id = data.id;
    this.currentIndex = data.currentIndex;
    this.current = data.current;
    this.from = data.from;
  },
  data() {
    return {
      show2: false,
      current: "",
      currentIndex: "",
      show1: false,
      remark: "",
      STATUS_STATUS_MAP,
      // 订单号
      orderInfo: {
        title: "订单号 27878787867",
        value: "部分收款",
        child: [
          {
            label: "对应客户",
            value: "",
            prop: "custom",
          },
          {
            label: "负责人",
            value: "",
            prop: "customContacts",
          },
          {
            label: "订单状态",
            value: "",
            prop: "status",
          },
        ],
      },
      // 收款信息
      collectionInfo: {
        title: "收款信息",
        value: "",
        child: [
          {
            label: "未收款金额",
            value: "",
          },
          {
            label: "收款金额",
            value: "",
          },
          {
            label: "",
            value: "",
          },
        ],
      },
      //
      navList: [
        {
          name: "基本信息",
        },
      ],
      goodsList: [
        {
          name: "商品信息",
        },
      ],
      // 基础信息
      basicInfo: [
        {
          label: "客户名称",
          value: "custom",
        },
        {
          label: "客户ID",
          value: "customId",
        },
        {
          label: "用户名字",
          value: "customContacts",
        },
        {
          label: "用户ID",
          value: "customContactsId",
        },
        {
          label: "创建时间",
          value: "createTime",
        },
        {
          label: "支付时间",
          value: "payTime",
        },
      ],
      id: null,
      info: {},
      from: null,
      dds: {},
      hasPower: false,
    };
  },
  computed: {
    orderStatus() {
      const str = this.info?.confirmTime ? "已生成" : "未生成";
      return this.from === "photo"
        ? str
        : STATUS_STATUS_MAP[this.info["status"]];
    },
    orderAmt() {
      const a = this.info.totalAmount || 0;
      const b = this.info.freightAmount || 0;
      const c = this.info.transportAmount || 0;
      const d = this.info.activityAmount || 0;
      const f = this.info.couponAmount || 0;
      const e = new BigNumber(a).plus(b).plus(c).minus(d).minus(f);
      return e;
    },
  },
  onShow() {
    this.getOrderInfo();
    this.init111();
  },
  methods: {
    async init111() {
      const userInfo = await getUserInfo();
      this.hasPower = userInfo.permissions.includes("order_guarantee");
    },
    show22() {
      this.show2 = true;
      this.init();
    },
    init() {
      let n = new BigNumber(this.info.payAmount || 0).minus(
        this.info.realPayAmount || 0
      );
      // this.info.payAmount - this.info.realPayAmount;
      let name =
        "https://saas.hzjhckj.com/wxorder.html?orderId=" +
        this.info.id +
        "&trxamt=" +
        n +
        "&payChannelId=" +
        this.info.payChannelId;
      // 获取uQRCode实例
      let qr = new UQRCode();
      // 设置二维码内容
      qr.data = name;
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = 200;
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
    },
    go() {
      uni.makePhoneCall({
        phoneNumber: this.dds.phoneNumber,
      });
    },
    cancel() {
      this.remark = "";
      this.show1 = false;
      this.show2 = false;
    },
    async confirm() {
      await reqGuarantee({
        remark: this.remark,
        orderId: this.id,
      });
      this.show1 = false;
      uni.navigateBack();
    },
    goToGuarantee() {
      this.show1 = true;
    },
    // 获取订单详情
    async getOrderInfo() {
      const api = this.from === "photo" ? getPhotoOrderInfo : getOrderListid;
      const res = await api(this.id);

      if (this.from !== "photo") {
        const res1 = await getOrderListid1({ sourceOrderId: this.id });
        this.dds = res1.records ? res1.records[0] : {};
      }

      this.info = res;

      // 总金额
      // 已收金额
      const realPayAmount = this.info.realPayAmount;
      // 未收金额
      const onPayAmount = this.orderAmt.minus(realPayAmount);
      this.collectionInfo = {
        title: "收款信息",
        value: "￥" + this.orderAmt,
        child: [
          {
            label: "未收款金额",
            value: "¥" + onPayAmount,
          },
          {
            label: "收款金额",
            value: "¥" + realPayAmount,
          },
          {
            label: "",
            value: "",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.order-info {
  min-height: 100vh;
  background: #fff;

  .order-info-bg {
    width: 100%;
    margin-top: 20px;
    // height: 707rpx;
    background: linear-gradient(#fbebeb 0%, #ffffff 100%);
    box-sizing: border-box;
    padding: 20px 18rpx;
    padding-top: 196rpx;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.info-wrap {
  // height: 199rpx;
  background: rgba(220, 38, 38, 0.05);
  border-radius: 16rpx;
  border: 1rpx solid rgba(220, 38, 38, 0.2);
  margin-bottom: 18rpx;
  padding: 20rpx 32rpx 24rpx;
  box-sizing: border-box;

  .info-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 18rpx;
    border-bottom: 1rpx solid rgba(220, 38, 38, 0.2);
    margin-bottom: 20rpx;

    &-title {
      font-size: 24rpx;
      color: #121e2c;
      line-height: 33rpx;
      margin-bottom: 8rpx;
    }

    &-value {
      font-size: 24rpx;
      color: #015ad4;
      line-height: 33rpx;
    }
  }

  .info-content {
    display: flex;
    justify-content: space-between;

    &-item {
      width: 33.3%;
    }

    &-label {
      font-size: 24rpx;
      color: #838589;
      line-height: 33rpx;
      margin-bottom: 8rpx;
    }

    &-value {
      font-size: 22rpx;
      color: #171a1d;
      line-height: 30rpx;
    }
  }
}
.basic-info {
  padding: 18rpx;
  margin-top: 580rpx;

  box-sizing: border-box;
  background: #ffffff;
}
</style>
